<template>
  <div>

    <!-- 卡片视图区 -->
    <div class="cards-area">
      <div class="card">
        <p class="card-title">
          解决方案
        </p>
        <p class="card-highlight">{{ valueNum(refData.sumSolution) }}</p>
        <p>厂商数量：{{ valueNum(refData.sumFirm) }}</p>
        <p>产品数量：{{ valueNum(refData.sumProduce) }}</p>
        <p>解决方案数量：{{ valueNum(refData.sumSolution) }}</p>
        <img src="@/assets/images/card-img-1.png" alt="">
      </div>
      <div class="card">
        <p class="card-title">
          评测管理
        </p>
        <p class="card-highlight">{{ valueNum(refData.sumReviewCase) }}</p>
        <p>评测用例数量：{{ refData.sumReviewCase }}</p>
        <p>评测任务数量：{{ refData.sumReviewTask }}</p>
        <p>已完成评测：{{ refData.sumReviewTaskDone }}</p>
        <img src="@/assets/images/card-img-2.png" alt="">
      </div>
      <div class="card">
        <p class="card-title">
          实验室工具
        </p>
        <p class="card-highlight">{{ valueNum(refData.sumTool) }}</p>
        <!-- <p>资源数量：0</p> -->
        <p>实验室工具数量：{{ valueNum(refData.sumTool) }}</p>
        <p>资源数量：{{ valueNum(refData.sumResource) }}</p>
        <img src="@/assets/images/card-img-3.png" alt="">
      </div>
      <div class="card">
        <p class="card-title">
          承接项目
        </p>
        <p class="card-highlight">{{ valueNum(refData.sumItem) }}</p>
        <p>进行中：{{ valueNum(refData.sumItemDoing) }}</p>
        <p>已完成：{{ valueNum(refData.sumItemDone) }}</p>
        <p>项目总数：{{ valueNum(refData.sumItem) }}</p>
        <img src="@/assets/images/card-img-4.png" alt="">
      </div>
    </div>

    <!-- 产品简介区 -->
    <div class="desc-area">
      <div class="desc-banner">
        <Icon name="train" style="margin-top: 12px; margin-right: 5px;" />
        自研工具支撑
      </div>
      <div class="desc-list">
        <div v-for="(product, index) in introductionList" :key="index" class="desc-item" v-show="!product.disabled" >
          <div class="desc-content">
            <p class="desc-title">{{ product.title }}</p>
            <div style="text-indent: 2em;" v-html="product.description"/>
          </div>
          <div class="desc-video" v-if="!product.playerOptions.disabled">
            <!-- 
              视频播放器样式类：
                video-player
                vjs-custom-skin
                video-player-box
            -->
            <video-player 
              class="vjs-custom-skin"
              v-for="(playerOption, i) in product.playerOptions" 
              :key="'videoPlayer_' + index + '_' + i"
              :ref="'videoPlayer_' + index + '_' + i"
              :options="playerOption"
              :playsinline="true" />

          </div>
          <Divider />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "app",
  props: {
    refData: {
      default: () => {}
    }
  },
  data: function () {
    return {
      introductionList: [
        {
          title: "海量数据库迁移工具",
          description: `
            exBase是海量数据自研的一款智能迁移工具。
            <br> 可以支持将Oracle、MySQL以及支持JDBC驱动的数据库迁移到Vastbase、PostgreSQL、MySQL、openGauss等数据库。它是一款支持多个源数据库和多个目标数据库的图形化迁移工具。
            <br>
            <br> 任务配置：
            <br> exBase一键式智能迁移平台，提供全图形化操作界面，几步操作即可帮助用户完成数据库迁移
            <br> 在迁移过程中自动处理数据类型转换、DDL转换、过程语言改写等问题，配合Vastbase Oracle兼容性，在提高迁移成功率的同时有效降低迁移工作量
            <br>
            <br> 运行任务：
            <br> 系统覆盖迁移全生命周期
            <br> 包括数据库兼容性评估、应用兼容性评估、数据库迁移、迁移后校验
            <br>
            <br> 应用评估报告：
            <br> 第一步运行兼容性评估，运行完毕后输出兼容性评估报告
            <br> 帮助用户分析评估应用兼容情况，定位不兼容片段，协助应用开发商修改应用SQL
            <br>
            <br> 数据库兼容评估：
            <br> 1）对象评估会对数据库中所有对象兼容性进行分析，输出兼容性分析结果，同时统计迁移评估工作量与并评估迁移所需时间
            <br> 2）不兼容对象可查看到具体不兼容的关键字以及不兼容内容所在片段
            <br>
            <br> 迁移报告：
            <br> 运行迁移任务后，系统按照最佳迁移方案进行数据库迁移
            <br> 迁移后生成迁移报告，可查看迁移结果
            <br> 目标库选用高度兼容Oracle的Vastabse数据库，搭配自动转换迁移功能，数据库迁移达到极致成功率
            <br> 迁移失败对象可查看，转换前后的DDL语句，快速定位问题
            <br>
            <br> 校验：
            <br> 为确保迁移数据准确性，迁移任务运行成功后可运行数据校验任务，检验数据迁移前后一致性
            <br> 校验任务运行完毕后可查看校验报告，报告优先显示校验失败对象，快速定位问题并进行处理
          `,
          playerOptions: [
            {
              width: '980', height: '201',
              sources: [{ type: 'video/mp4', src: require("@/assets/videos/video-exBase.mp4") }]
            },
            {
              width: '980', height: '209',
              sources: [{ type: 'video/mp4', src: require("@/assets/videos/video-AtlasDB.mp4") }]
            }
          ]
        },
        {
          title: "达梦数据迁移工具",
          description: `
            DM数据迁移工具提供了主流大型数据库迁移到DM、DM到DM、文件迁移到DM以及DM迁移到文件的功能。
            <br> DM数据迁移工具采用向导方式引导用户通过简单的步骤完成需要的操作。
            <br>
            <br> DM数据迁移工具支持：
            <br> ◆ 主流大型数据库Oracle、SQLServer、MySQL、DB2、PostgreSQL、Informix、Kingbase、Sybase的模式、表、视图、序列、索引迁移到DM；
            <br> ◆ ODBC数据源、JDBC数据源的模式、表、视图迁移到DM；
            <br> ◆ DM数据库的模式、表、视图、序列、索引迁移到主流大型数据库Oracle、SQLServer、MySQL；
            <br> ◆ DM数据库之间模式、表、序列、视图、存储过程/函数、包、类、同义词、触发器、对象权限的迁移；
            <br> ◆ DM数据库模式、表、序列、视图、存储过程/函数、包、类、同义词、触发器、对象权限迁移到XML文件；
            <br> ◆ DM数据库模式、表、序列、视图、存储过程/函数、包、类、同义词、触发器、对象权限迁移到SQL脚本文件；
            <br> ◆ DM数据库的表、视图数据迁移到文本文件；
            <br> ◆ DM数据库的表、视图数据迁移到Excel文件；
            <br> ◆ DM数据库的表、视图数据迁移到Word文件；
            <br> ◆ SQL脚本文件迁移到DM数据库；
            <br> ◆ XML文件迁移到DM数据库；
            <br> ◆ 指定格式的文本文件、Word文件和Excel文件迁移到DM数据库。
          `,
          playerOptions: [
            {
              width: '980', height: '217',
              sources: [{ type: 'video/mp4', src: require("@/assets/videos/video-DM.mp4") }],
            }
          ]
        },
        {
          title: "瀚高数据库迁移工具 - HG-SABRE V4.1.3",
          description: `
            HG-SABRE V4.1.3，支持图形化迁移。
            <br> 用来实现 Oracle|MySQL|SQL Server 数据库到 HIGHGO|PostgreSQL 数据库迁移的自动化，针对客户的应用系统数据库进行迁移，而能够提供相应的辅助工具所开展的项目。
            <br>
            <br> 该工具主要提供以下六部分内容：
            <br> 1) 数据库连接管理数据库连接管理，作用于服务器连接，进行源端或目标端的选择。连接的相关信息，以列表形式展现，服务于迁移评估、数据迁移、PLSQL迁移的连接参数选择。
            <br> 2) 迁移评估迁移评估提供Oracle|MySQL|SQL Server|DB2|KingbaseV7|KingbaseV8|DM7|DM8|HIGHGO数据库到HIGHGO|PostgreSQL的迁移评估，本版支持数据库的功能如下：
            <br> 
            <br> Oracle 迁移评估支持的功能：
            <br> (1) 统计 Oracle 对象数量
            <br> (2) 统计 Oracle 对象大小
            <br> (3) 显示 Oracle 行数前十的数据表信息
            <br> (4) 显示 Oracle 对象前十的对象信息
            <br> (5) 统计 Oracle 分区表信息
            <br> (6) 统计 Oracle 触发器信息
            <br> (7) 统计 Oracle PLSQL 对象，包括各种使用 PLSQL 的对象
            <br> (8) 统计 Oracle PLSQL 行数前十的对象
            <br> (9) 统计 Oracle 其他对象信息
            <br> (10) 生成迁移报告。
          `,
          playerOptions: [
            {
              width: '980', height: '231',
              sources: [{ type: 'video/mp4', src: require("@/assets/videos/video-HG-SABRE V4.1.3.mp4") }]
            }
          ]
        },
        {
          title: "瀚高数据库语法评估工具 - SqlSyntaxCheckTool V1.0",
          description: `
            SQL语法兼容评估工具（简称SQL-GCE）基于对数据库源端业务产生的SQL的分析，并在瀚高数据库中重演，根据重演结果生成报告。
            <br>
            <br> 目前支持源数据库包括orace、SqlServer和mysql。
            <br> SQL-GCE是基于源库中业务SQL的，所以在使用之前需要对源数据库进行相关SQL日志的配置，以方便工具读取源SQL。
          `,
          playerOptions: [
            {
              width: '980', height: '257',
              sources: [{ type: 'video/mp4', src: require("@/assets/videos/video-SqlSyntaxCheckTool V1.0.mp4") }]
            }
          ]
        },
        {
          title: "1080p 视频测试",
          description: `https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4`,
          playerOptions: [
            {
              width: '980', height: '241',
              sources: [{ type: 'video/mp4', src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4' }]
            }
          ],
          disabled: true
        }
      ]
    }
  },
  mounted: function () {},
  computed: {
    valueNum: function () {
      return (val) => {
        return isNaN(val) ? '--' : val;
      }
    }
  },
  methods: {}
}
</script>

<style scoped>
  /* ---------- Overview 概览展现区 ---------- */
  .cards-area {
    /* border: 1px dotted red; */
    /* height: 200px; */
    display: flex;
    flex-direction: row;
  }

  .cards-area div:nth-child(n) {
    flex: 1;
    margin-right: 5px;
    background-color: whitesmoke;
    border-radius: 3px;
    padding: 15px;
    padding-bottom: 5px;
  }
  .cards-area div:last-child {
    margin-right: 0;
  }
  .card {
    position: relative;
  }
  .card-title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 0px;
  }
  .card-highlight {
    color: #B30000;
    padding-left: 50px;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .card > img {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 100px;
  }

  .desc-area {
    margin-top: 5px;
    border-radius: 3px;
    overflow: hidden;
  }
  .desc-banner {
    padding-left: 10px;
    background-color: #E9EBF0;
    height: 40px;
    line-height: 40px;
  }
  .desc-list {
    background: whitesmoke;
    /* padding-top: 25px; */
  }
  .desc-item {
    padding: 25px;
    padding-bottom: 0;
  }
  .desc-content {
    display: inline-block;
    width: calc(100% - 430px);
    padding-right: 25px;
  }
  .desc-title {
    font-size: 18px;
    font-weight: 900;
  }
  .uni-divider {
    margin: 0;
    margin-top: 25px;
  }

  .desc-video {
    display: inline-block;
    /* border: 1px solid red; */
    width: 430px;
    vertical-align: top;
  }

  .vjs-custom-skin {
    border: 1px solid lightgray;
    border-radius: 15px;
    box-shadow: 5px 5px 10px gray;
    overflow: hidden;
    margin-bottom: 15px;
  }

  .desc-video .vjs-custom-skin:last-child {
    margin-bottom: 0;
  }

</style>
